<template>
  <div class="capsule" @click="pr.cb" @touch="pr.cb" :style="pr.bg ? { backgroundColor: pr.bg, color: '#fff' } : {}">
    <img :src="pr.icon" width="44" height="44" v-if="pr.icon" />
    <div style="height: 44px;" v-if="!pr.icon"></div>
    <span>{{ pr.title }}</span>
    <img :src="pr.icon" style="
        position: absolute;
        height: 100%;
        top: 0px;
        right: -10px;
        opacity: 0.1;
        transform: rotate(-30deg);
      " v-if="pr.icon" />
  </div>
</template>

<script setup lang="ts">
const prop = defineProps(["pr", "b"]);
let { pr } = prop;
</script>
<style scoped>
.capsule {
  grid-column-start: auto;
  grid-column-end: span 1;
  grid-row-start: auto;
  grid-row-end: span 1;
  background-color: white;
  border-radius: 15px;
  padding: 10px;
  display: flex;
  align-items: center;
  position: relative;
  overflow: hidden;
}

.capsule span {
  padding-left: 10px;
  font-weight: bold;
  z-index: 1;
  -webkit-line-clamp: 2;
}
</style>